<template>
  <div>
    <h3>基础表格</h3>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="inputdiv" style="  width: 200px;"> 
              <el-input class="inputID" placeholder="请输入要查询的ID名" v-model="sousuo.id"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
              <el-button class="chaID" type="primary" icon="el-icon-search" @click="search()">搜索ID</el-button>
              <el-input class="inputname" placeholder="请输入要查询的用户名" v-model="sousuo.name"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
              <el-button class="chaname" type="primary" icon="el-icon-search" @click="search()">搜索用户</el-button>
          <el-button class="cha" type="primary" icon="el-icon-search" @click="chaxun()">搜索</el-button>
        </div>
        <el-button style="float: right; padding: 3px 0" type="text"
         @click="dialogVisible = true" >添加</el-button>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="id" label="ID" width="120"></el-table-column>
        <el-table-column
          prop="name"
          label="用户名"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="balance"
          label="账户余额"
          width="180"
        >  
        <template slot-scope="scope">{{scope.row.balance|filterbalance}}</template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="240"
        ></el-table-column>
        <el-table-column
          prop="state"
          label="状态"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="register"
          label="注册时间"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="pressword"
          label="密码"
          width="200"
        ><template slot-scope="pressword">{{pressword|filterpress}}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index),dialogVisible = true"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 添加 -->
    <el-dialog
  title="添加"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
   <el-input placeholder="ID" v-model="newtableData.id" size="medium" clearable></el-input><br>
   <el-input placeholder="用户名:" v-model="newtableData.name" clearable></el-input><br>
  <el-input placeholder="账户余额:" v-model="newtableData.balance" clearable></el-input><br>
  <el-input placeholder="地址:" v-model="newtableData.address" clearable></el-input><br>
  <el-input placeholder="状态:" v-model="newtableData.state" clearable></el-input><br>
  <el-input placeholder="注册时间:" v-model="newtableData.register" clearable></el-input><br>
    <el-input placeholder="密码:" v-model="newtableData.pressword" clearable show-password></el-input><br>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addSave(),xiugai = false">确 定</el-button>
  </span>
</el-dialog>
<!-- 修改 -->
<el-dialog
  title="修改"
  :visible.sync="dialogVisible"
  width="30%"
  :before-close="handleClose">
   <el-input placeholder="ID" v-model="newtableData.id" size="medium" clearable></el-input><br>
   <el-input placeholder="用户名:" v-model="newtableData.name" clearable></el-input><br>
  <el-input placeholder="账户余额:" v-model="newtableData.balance" clearable></el-input><br>
  <el-input placeholder="地址:" v-model="newtableData.address" clearable></el-input><br>
  <el-input placeholder="状态:" v-model="newtableData.state" clearable></el-input><br>
  <el-input placeholder="注册时间:" v-model="newtableData.register" clearable></el-input><br>
    <el-input placeholder="密码:" v-model="newtableData.pressword" clearable show-password></el-input><br>
  <span slot="footer" class="dialog-footer">
    <el-button @click="quxiao(),dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateSave(),dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
import { getEmp,delEmp,addEmp,updateEmp } from "../api/employee";
export default {
  name: "Foundation",
  data() {
    return {
      sousuo:{
        id:"",
        name:""
      },
      tableData: [],
      multipleSelection: [],
       dialogVisible: false,
       xiugai:false,
       newtableData:{
          id:"",
          name:"",
          balance:"",
          address:"",
          state:"",
          register:"",
          pressword:""
                    }
            };
  },
  filters:{
    filterbalance(balance){
      return balance ? ('￥'+balance):'--'
    },
    filterpress(pressword){
      return pressword ='......'
    }
  },
  methods: {
    //获取
    getAllEmp() {
        getEmp().then((data) => {
      console.log(data);
      data.forEach((item, index) => {
        item.key = index;
      });

      this.tableData = data;
      console.log(this.tableData);
    });
  
  }, 
   
  //添加
    addSave(){
          addEmp(this.newtableData)
        .then(data=>{
              this.getAllEmp()
              
                       },
                       this.newtableData={
                     id:"",
                     name:"",
                     balance:"",
                     address:"",
                     state:"",
                     register:"",
                     pressword:""
                                  }
            ); 
},
//查询
    search(){        
        getEmp(this.sousuo).then(data=>{
                this.tableData=data
        });
    },
    chaxun(){
       getEmp(this.sousuo).then(data=>{
                this.tableData=data
        });
    },
    //删除
    handleDelete(index) {
      console.log(index)
      console.log(this.tableData[index].id)
        delEmp(this.tableData[index].id)
        .then(data=>{
          console.log(data)
            this.getAllEmp()
        });
    },
     //编辑触发事件
    handleEdit(index) {
        this.newtableData={...this.tableData[index]}
        console.log(this.newtableData)
    },
    //修改
    updateSave(){
      console.log(this.newtableData)
        updateEmp(this.newtableData.id,this.newtableData)
        .then(data=>{
              
           
        });
        this.newtableData={
                     id:"",
                     name:"",
                     balance:"",
                     address:"",
                     state:"",
                     register:"",
                     pressword:""
                                  }
                                   this.getAllEmp();
    },
    quxiao(){
      this.newtableData={
                     id:"",
                     name:"",
                     balance:"",
                     address:"",
                     state:"",
                     register:"",
                     pressword:""
                                  }
    },
    //input框发生改变时
    handleSelectionChange() {
      console.log("1");
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
         },
  },
  mounted() {
       getEmp().then((data) => {
      // console.log(data);
      data.forEach((item, index) => {
        item.key = index;
        if(item.state==1){
          item.state="失败"
        }else if(item.state==0){
          item.state="成功"
        }
        // item.balance="¥ "+item.balance
      });
      this.tableData = data;
      // console.log(this.tableData);
    })
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.el-input--prefix{
  width: 200px;
}
.inputdiv{
  width: 1200px !important;
  height: 40px;
  display: inline-block !important;
  display: flex;
  top: 10px;
}

.el-button{
  margin-left: 10px;
  margin-right: 10px;
}

</style>